{% extends 'base.html' %}
{% load static %}
{% block title %}
    添加
{% endblock %}
{% block style %}

    <style>
        .form-box {
            width: 800px;
            margin: auto 300px;
        }

        .btn {
            display: inline-block;
        }

    </style>
{% endblock %}
{% block body %}
    <div class="form-box">
        {% csrf_token %}
        <input type="hidden" id="data" value="{{ data }}">
        <form class="layui-form" action="">
            <div id="last2">
                <div class="layui-form-item">
                    <label class="layui-form-label">问题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入问题"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block" id="types"></div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">答案</label>
                    <div class="layui-input-inline" style="width: 77.5%">
                        <input type="text" name="ans" lay-verify="ans" autocomplete="off" placeholder="请输入答案"
                               class="layui-input">
                    </div>
                    <button type="button" class="layui-btn layui-btn-warm btn">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script>

        layui.config({
            base: "{% static 'modules/' %}"
        }).extend({
            selectInput: "selectInput/selectInput"
        }).use(['form', 'layer', 'jquery', 'selectInput'], function () {
            // 插件加载
            let $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                selectInput = layui.selectInput;

            selectInput.render('#types', {
                // 容器id
                name: 'types', // 渲染的input的name值
                hasSelectIcon: true,
                layVerify: 'required', //同layui form参数lay-verify
                placeholder: '请输入类型', // 渲染的inputplaceholder值
                // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
                invisibleMode: true,
                ignoreCase: true,
                // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
                data: {{ data|safe}},
                hasCut: true,
                remoteSearch: false,
            });

            var ins = selectInput.getInstance("#types");
            //layui 表单动态添加、删除input框  ---start
            //动态添加input输入框
            let x = 1;
            let a = '<input type="text" name="ans" lay-verify="ans" autocomplete="off" placeholder="请输入答案"'
            $(".btn").click(function () {
                let str = '<div class="layui-form-item">' +
                    '<label class="layui-form-label">答案</label>' +
                    '<div class="layui-input-inline" style="width: 77.5%">' +
                    '<input type="text" name="ans' + x + '"lay-verify="ans' + x + '" autocomplete="off" placeholder="请输入答案"' +
                    'class="layui-input">' +
                    '</div>' +
                    '<button type="button" class="layui-btn layui-btn-danger removeclass btn">' +
                    '<i class="layui-icon">&#xe67e;</i>' +
                    '</button>' +
                    '</div>'
                $("#last2").append(str);
                x++;
            });

            //删除动态添加的input输入框
            $("body").on('click', ".removeclass", function () {
                //元素移除前校验是否被引用
                let approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
                let parentEle = $(this).parent();
                parentEle.remove();
            });

            //监听提交
            form.on('submit(submit)', function (data) {
                $.ajax({
                    url: "/add",
                    type: 'post',
                    contentType: "application/json",
                    headers: {"X-CSRFToken": $('[name="csrfmiddlewaretoken"]').val()},
                    data: JSON.stringify(data.field),
                    success: function (data) {
                        layer.msg("添加成功", {icon: 1});
                    }
                });
                return false;
            });
        });
    </script>

{% endblock %}
